<template>
	<div>
				<smpPanel>
				<el-form :inline="false" label-width="100px" size="mini" ref="form" :model="form">
					
					<el-row>
							<el-col :span="8">
								<el-form-item label="系统名称:" prop="systemNo">
									<el-select v-model="form.body.systemNo" style="width: 100%" filterable remote reserve-keyword
										placeholder="请输入系统编号或名称" :remote-method="getsystems">
										<el-option v-for="item in systemList" :key="item.systemNo" :label="item.systemName"
											:value="item.systemNo">
											<span style="float: left;margin-left: 3px;">{{ item.systemNo }}</span>
											<span style="float: right;margin-right: 3px;">{{ item.systemName }}</span>
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							
							<el-col :span="8">
								<el-form-item label="环境类型:" prop="envirType">
									<el-select v-model="form.body.envirType" style="width: 100%" placeholder="环境类型" >
										<el-option v-for="item in dict('SMP0026')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							
							<el-col :span="8">
								<el-form-item label="环境状态:" prop="status">
									<el-select v-model="form.body.status" style="width: 100%" placeholder="环境状态" >
										<el-option v-for="item in dict('SMP0027')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							
							<el-col :span="8">
								<el-form-item label="ESB环境:">
									<el-select v-model="form.body.esbAddr" style="width: 100%" placeholder="环境类型">
										<el-option v-for="item in esbEnvironmentList" :key="item.ip" :label="item.ip+'('+dictName(item.esbFlg,'SMP0031')+')'" :value="item.ip"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
					
					
							<el-col :span="16">
									<searchButtonGroup @search="onSubmit" @reset="clear"  online  />
							</el-col>
					
					</el-row>
				</el-form>
			</smpPanel>
		
		
		
		<smpPanel title="运行列表">
				<el-table :data="list" size="mini" stripe border style="width: 100%">
				    <el-table-column prop="systemNo" label="系统名称" align="center" >
						<template slot-scope="scope">
							{{scope.row.systemNo|getSystemName}}({{scope.row.systemNo}})
						</template>
					</el-table-column>
					<el-table-column prop="hostName" label="主机名称" align="center" />
					<el-table-column prop="systemCurrentAddr" label="系统环境" align="center" />
					<el-table-column prop="envirType" label="环境类型" align="center">
						<template slot-scope="scope">
							{{scope.row.envirType|dictName("SMP0026")}}
						</template>
					</el-table-column>
					<el-table-column prop="esbAddr" label="ESB环境" align="center">
						<template slot-scope="scope">
							<!-- {{scope.row.esbAddr|dictName("SMP0016")}} -->
							{{scope.row.esbAddr|getESBEnvironment(that)}}
						</template>
					</el-table-column>
					<el-table-column prop="status" label="环境状态" align="center">
						<template slot-scope="scope">
							{{scope.row.status|dictName("SMP0027")}}
						</template>
					</el-table-column>
					
					<el-table-column  label="操作"
					      align="center" >
						<template slot-scope="scope">
						       <el-link 
						         size="mini"
								 type="primary"
								 :underline="false"
								 style="font-size: 12px;"
						         @click="handleEdit(scope.$index, scope.row)">联通性测试</el-link>
						</template>
					
					</el-table-column> 
					
					
				</el-table>
				<div class="smp-pagination" >
					<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper" :page-size="form.pageSize" :page-sizes="[5,10,15,20]" :total="total" :current-page="form.pageNum" @current-change = "currentChange" @size-change="sizeChange">
					</el-pagination>
				</div>
			</smpPanel>
		<network ref="network" />
	</div>
</template>

<script>
	"use strict";
	import {getEnvironmentInfoByPage,getEsbEnvironmentByEsbFlg} from '@/api/environment.js';
	import network from './components/network';
	
	export default {
		
		components: { network },
		
		data() {
			return {
				esbEnvironmentList: [],
				that:this,
				total:0,
				list: [],
				form: {
					body:{
						systemNo:'',
						envirType:'',
						status:'',
						esbAddr:''
					},
					pageNum: 1,
					pageSize: 5
				},		
			};
	
	
	
		},
		
		created() {
			Object.assign(this.form.body,this.$route.query);
			this.form.body.pageNum = this.$route.query.pageNum;
			this.form.body.pageSize = this.$route.query.pageSize;
			
			this.getEsbEnvironmentList();
			this.getList();
		},
		
		filters: {
			getESBEnvironment: function(ip,that) {
			
				let esbEnvironment =  that.esbEnvironmentList.filter(item=>item.ip==ip)[0];
				return esbEnvironment.ip +"(" + that.dictName(esbEnvironment.esbFlg,'SMP0031') +")";
			}
		},
		
		
		methods: {
			
			getEsbEnvironmentList() {
				getEsbEnvironmentByEsbFlg({}).then(response => {
					this.esbEnvironmentList = response.data.extend;
				})
			},

	
			onSubmit() {
				this.form.pageNum = 1;
				this.getList();
			},
			
			clear() {
				this.form.body = {};
			},
			
			getList() {
				getEnvironmentInfoByPage(this.form).then(response => {
					this.list = response.data.extend.list
					this.total = response.data.extend.total;
					
					let query ={};
					Object.assign(query,this.form.body);
					query.pageNum = this.form.pageNum;
					query.pageSize = this.form.pageSize;
					this.$router.push({query:query})
				}).catch(error => {
					this.$message({
						duration:5000,
							type: 'error',
							message: '环境信息查询失败！'
					});
				});
			},
			
			handleEdit(index,row){
				this.$refs.network.showDialog(row);
			},
			
			currentChange(val){
				this.form.pageNum = val;
				this.getList();
			},
			sizeChange(val){
				this.form.pageSize = val;
				this.form.pageNum = 1;
				this.getList();
			}
			

		},
		
	
	}
</script>

<style>
</style>